<template>
  <div class="distrib_list">
    <div class="distrib_list_search">
      <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.distribStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="item in distribStatusOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label}}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 145px;"
          v-model="featchData.settlementStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="item in settlementStatusOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-input
          style="width: 180px;"
          v-model="featchData.query"
          :placeholder="childRoleName+'名称'"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="distrib_list_table">
      <div class="total_data">
        <span class="data_label">数据总览 ：</span>
        <span class="custom_text">充值金额</span>
        <span class="num_data" style="color: #1183FB;">{{ totleordermoney }}</span>
        <span class="custom_text">元，{{childRoleName}}分成金额</span>
        <span class="num_data" style="color: #1183FB;">{{ totlemomey }}</span>
        <span class="custom_text">元，已结算金额</span>
        <span class="num_data" style="color: #56A500;">{{ totlesettlemoney }}</span>
        <span class="custom_text">元，可结算金额</span>
        <span class="num_data" style="color: #CF0D17;">{{ totlecansettlementmoney }}</span>
        <span class="custom_text">元。</span>
      </div>
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
        <!-- 推广商/推广员名称 -->
        <template #username="scope">
          <span>{{ scope.row.username }}({{ scope.row.assistantid }})</span>
        </template>
        <!-- 分成比例 -->
        <template #settlementpercent="scope">
            <div>
                <span>{{ scope.row.settlementpercent }}%</span>
            </div>
        </template>
        <!-- 实际结算时间 -->
        <template #settlementat="scope">
          <span v-if="scope.row.settlementat">{{ dateFormat(scope.row.settlementat) }}</span>
          <span v-else> - </span>
        </template>
        <!-- 结算状态 -->
        <template #settlementstatus="scope">
            <div v-if="scope.row.settlementstatus === 1">
                <span>正常</span>
            </div>
            <div v-if="scope.row.settlementstatus === 2">
                <span style="color:#CF0D17">冻结</span>
            </div>
        </template>
        <!-- 分成状态 -->
        <template #distribstatus="scope">
            <div v-if="scope.row.distribstatus === 1">
                <span style="background: #56A500;" class="status_tag"></span><span>正常</span>
            </div>
            <div v-if="scope.row.distribstatus === 2">
                <span class="status_tag"></span><span>已过期</span>
            </div>
        </template>
        <template #action="scope">
            <div>
                <el-button 
                  type="default" 
                  v-if="scope.row.settlementstatus === 1"
                  @click="jumpDetile(scope.row,'分成结算')"
                >
                  <span>分成结算</span>
                </el-button>
                <el-button 
                  type="default" 
                  class="blue_button"
                  v-if="scope.row.settlementstatus === 2"
                  @click="jumpDetile(scope.row,'结算明细')"
                >
                  <span>结算明细</span>
                </el-button>
            </div>
        </template>
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { getListByPage } from "@/api/distrib";
 
import {  
    DISTRIB_TABLE_COLUMNS,
    DISTRIB_STATUS_OPTIONS,
    SETTLEMENT_STATUS_OPTIONS
} from "../const";
import { formatDate } from "@/utils/validate";
import { getCookie } from "@/utils/auth";
export default {
  components: { pageTableNew },
  data() {
    return {
      groupsOption: [],
      roleType: getCookie("roleType"),
      childRoleName:'',
      featchData: {
        pageSize: 20,
        pageStart: 1,
        sortBool: "",
        sortType: "",
        dateTime: [], //时间区间
        query: "",   //推广商 推广员名称
        distribStatus:'',
        settlementStatus:'',
      },
      distribStatusOption: DISTRIB_STATUS_OPTIONS, // 分成状态类型
      settlementStatusOption: SETTLEMENT_STATUS_OPTIONS, // 结算状态
      tableData: [],
      tableColumns: DISTRIB_TABLE_COLUMNS,
      total: 0,
      totleordermoney:'',
      totlemomey:'',
      totlesettlemoney:'',
      totlecansettlementmoney:'',
    };
  },
  created() {
    this.childRoleName = this.$store.state.user.childRoleName;
    this.tableColumns.forEach(item=>{
      if(item.key === 'username'){
        item.label = this.childRoleName;
      }
      // if(item.key === 'money'){
      //   item.label = this.childRoleName + '分成金额';
      // }
    })
    this.searchData();
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd HH:mm:ss')
        }
      }
    }
  },
  methods: {
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        sortBool: "",
        sortType: "",
        dateTime: [],
        query: "",   
        distribStatus:'',
        settlementStatus:'',
      };
      this.$nextTick(()=>{
        this.searchData();
      })
    },
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        startAt: this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'',
        endAt: this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'',
        query: this.featchData.query,
        distribStatus: this.featchData.distribStatus,
        settlementStatus: this.featchData.settlementStatus,
        sortBool: this.featchData.sortBool,
        sortType: this.featchData.sortType,
      };
      getListByPage(params).then(res => {
        if(res.code === 0){
          this.total = res.data.total;
          this.tableData = res.data.values;
          this.totleordermoney = res.data.totleordermoney;
          this.totlemomey = res.data.totlemomey;
          this.totlesettlemoney = res.data.totlesettlemoney;
          this.totlecansettlementmoney = res.data.totlecansettlementmoney;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.searchData();
    },
    handleSortChange(data) {
      this.featchData.sortBool = data.sortBool?-1:1;
      this.featchData.sortType = data.sortType;
      this.searchData();
    },
    // 跳转结算明细
    jumpDetile(item,title) {
      this.$router.push({
        path: "/settlement/distrib/detailed",
        query: {
          title:title,
          assistantid: item.assistantid,
          username: item.username,
          settlementstatus: item.settlementstatus
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.distrib_list {
  .distrib_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .distrib_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
  }
}
</style>
